<!--  -->
<template>
  <div class>
    <div class="bg_img">
      <img src="@/assets/img/banner.png" style="width:100%" alt />
    </div>
    <titlemeta></titlemeta>
    <div class="ly-content">
      <ul class="ly-left">
        <li class @click="userInfos" :class="isPlay == 'info' ? 'ly-action' : ''">个人信息</li>
        <li class @click="userBill" :class="isPlay =='bill' ? 'ly-action' : ''">我的账单</li>
      </ul>
      <div class="ly-right">
        <ul class="ly-info" v-if="isPlay =='info' ">
          <li>手机号码/账号：{{userInfo.mobile}}</li>
          <li>公司名称：{{userInfo.companyName}}</li>
          <li>联系邮箱：{{userInfo.email}}</li>
          <li>联系人: {{userInfo.linkman}}</li>
          <li>qq: {{userInfo.qq}}</li>
          <li>专属顾问: {{userInfo.counselor}}</li>
          
        </ul>

        <div  v-if="isPlay =='bill' ">
           <ul class="ly-info" >
          <li v-for="(item,index) in billData" :key='index'>{{item.billName}}  <a :href="item.billUrl" download="w3logo" style="margin-left:10px">下载</a> </li>
          <!-- <a href="billData" download="w3logo"> -->
        </ul>
        </div>
       
      </div>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import { mapGetters } from "vuex";
import { companyInfo ,findByUserId} from "@/api/info";
import titlemeta from "@/components/titlemeta";
import { clieentWidth } from "@/utils/clientwidth";

export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    titlemeta
  },
  data() {
    //这里存放数据
    return {
      isPlay: "info",
      billData:[]
    };
  },
  //监听属性 类似于data概念
  computed: {
    ...mapGetters(["userInfo"])
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    userInfos() {
      this.isPlay = "info";
    },
    userBill() {
     
      this.isPlay = "bill";
      this.findByUserIdData()
    },
    findByUserIdData() {
      findByUserId(this.userInfo.id).then(res => {
        console.log(res)
        if(res.code == '0000') {
          this.billData = res.data
        }
      })

    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
@import url("../../assets/nvit.scss");
//@import url(); 引入公共css类
$w: 6.25;
.ly-content {
  margin-top: 60px;
}

.ly-left {
  width: 20%;
  display: inline-block;
  vertical-align: top;
  min-height: 400px;
  border: 1px solid #e5e5e5;
  margin-bottom: 50px;

  li {
    width: 100%;
    line-height: 60px;
    height: 60px;
    text-align: center;
    font-size: 16px;
    cursor: pointer;

    &.ly-action {
      color: #fff;
      background: #0767f2;
    }
  }
}

.ly-right {
  width: 80%;
  display: inline-block;
  vertical-align: top;
  padding: 0 50px;

  .ly-info {
    li {
      line-height: 40px;
      text-align: left;
      font-size: 14px;
    }
  }
}

@media screen and (max-width: 780px) {
  .bg_img {
    width: 100%;
    img {
      width: 100%;
    }
  }
  .ly-left {
    display: none;
  }
  .ly-right {
    width: 100%;
    padding: 0.3rem;
  }
}
</style>
